<script lang="ts" setup>
import { defineComponent, onMounted, reactive, ref, watch, watchEffect } from 'vue';
import axios from 'axios';
import { h } from 'vue'
import { ElNotification } from 'element-plus'
const methods = {
    setIpAddress() {
      switch (state.form.Mode) {
        case '1':
          state.form.Ip = '10.10.0.4';
          break;
        case '2':
          state.form.Ip = '10.12.1.171';
          break;
        case '3':
          state.form.Ip = '192.168.117.129';
          break;
      }
    },
    
    onSubmit: async () => {
        ElNotification({
            title: '提示',
            message: h('i', { style: 'color: teal' }, '程序已经开始运行!'),
			duration: 10,
		})
		state.load = true

        if (state.form.Mode == '1') {
            const { data } = await axios.get('/final/function_adjust', {params: {ip : state.form.Ip}});
        } else if (state.form.Mode == '2') {
            const { data } = await axios.get('/final/defence', {params: {ip : state.form.Ip}});
        } else {
            const { data } = await axios.get('/final/traffic_flow_adjust', {params: {ip : state.form.Ip}});
        }

        clearInterval(state.intervalId);
        const fetchUpdate = async () => {
            const {data:dat2a} = await axios.get('/final/get_current_info');
            state.http = "存在的未执行载荷："+dat2a.payload_list+"\n已排除的载荷："+dat2a.all_removed
            state.sys = "0x20:"+dat2a.config["0x20"]+'\n'+"doh:"+dat2a.config.doh+'\n'+"dot:"+dat2a.config.dot+'\n'+"ipv6_support:"+dat2a.config.ipv6_support+'\n'+"port_rand:"+dat2a.config.port_rand+'\n'+"server:"+dat2a.config.server+'\n'+"system_fp:"+dat2a.config.system_fp+'\n';
            state.bindver = dat2a.nxns_amplified_factor
            state.out = dat2a.txt_output


            if(dat2a.time_to_get_dnssec_poison_img_2){
                const {data:dat2c} = await axios.get('/final/get_dnssec_poison_img');
                state.after = dat2c
            }
            
        };

        var i = setInterval(fetchUpdate, 1500);
        state.load = false

        
        // setTimeout(() => {
        //     clearInterval(i);
        // }, 1000000);
    },
};

interface UserForm {
    Ip: string;
    Mode: string;
}

const state = reactive({
	form: {
		Ip: '192.168.117.129',
		Mode: '3',
	} as UserForm,
    buttonText: '开始攻击',
	buttonStyle: { backgroundColor: ''},
	isAttacking: false,
    intervalId: 1,
    http: '',
    sys: '',
    bindver: '',
    out:'',
    before: '',
    beforebool: true,
    afterbool: true,
    after: '',
    load: false,
    externalHtmlAfter: ''
});




</script>

<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/Detection' }" class="bread">载荷调整</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-form>
        <div class="display-flex j-c-c a-i-c height100">
            <div class="login-form">
                <h1 class="title">IP输入</h1>
                <br />

                <el-form :model="state.form">
                    <el-form-item prop="email" label="攻击的IP地址">
                        <el-input v-model="state.form.Ip" placeholder="请输入IP地址"></el-input>
                    </el-form-item>
                </el-form>

                <el-radio-group v-model="state.form.Mode" @change="methods.setIpAddress">
                    <el-radio value="1">载荷功能自适应调整</el-radio>
                    <el-radio value="2">载荷防护措施自适应调整</el-radio>
                    <el-radio value="3">拒绝服务速率自适应调整</el-radio>
                </el-radio-group>

                <el-form-item class="button-container">
                    <el-button class="Mybutton" type="primary" @click="methods.onSubmit"
                        :style="{ backgroundColor: state.buttonStyle.backgroundColor }">
                        {{ state.buttonText }}
                    </el-button>

                </el-form-item>
            </div>
        </div>

        <div class="display-flex j-c-c a-i-c height100" v-loading="state.load">
            <h1 class="title"></h1>






        </div>

        <div v-loading="state.load" style="display: flex; justify-content: space-between;">

            <el-form :model="state.form" label-width="140px" class="output-form" style="margin-right: 10px;">
                <h1 class="title">探测结果</h1>
                <el-form-item prop="email" label="载荷列表" style="color:blue">
                    <el-input v-model="state.http" :rows="15" :autosize="{ minRows: 15, maxRows: 15 }" readonly="true"
                        disabled type="textarea"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="探测参数">
                    <el-input v-model="state.sys" :rows="15" :autosize="{ minRows: 10, maxRows: 10 }" readonly="true"
                        disabled type="textarea"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="放大倍率">
                    <el-input v-model="state.bindver" :rows="1" :autosize="{ minRows: 3, maxRows: 3 }" readonly="true"
                        disabled type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="state.form" label-width="140px" class="output-form" style="margin-left: 10px;">
                <h1 class="title">探测过程</h1>
                <el-form-item prop="email" label="程序输出">
                    <el-input v-model="state.out" :rows="15" :autosize="{ minRows: 25, maxRows: 25 }" readonly="true"
                        disabled type="textarea" ref="inputRef"></el-input>
                </el-form-item>
            </el-form>
        </div>
        
        
        <div class="card-container" style="display: flex; justify-content: space-between; margin-top: 10px;;">
            <el-card class="box-card" style="width: 50%; height: auto; margin-right: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>攻击前</span>
                    </div>
                </template>

                <body>
                    <img src="@/assets/beforeattack.png" alt="攻击前图片" style="width: 100%; height: auto;">
                </body>
            </el-card>
            <el-card class="box-card" style="width: 50%; height: auto; margin-left: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>攻击后</span>
                    </div>
                </template>

                <body>
                    <div v-html="state.after"></div>
                </body>
            </el-card>

        </div>
    </el-form>



</template>


<style lang="css" scoped>
.login-form {
	width: 400px;
	height: 300px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.output-form {
	width: 800px;
	height: 770px;
    margin-top: 40px;
	margin: 0 auto;
    padding: 20px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.OutputBox {
	width: 400px;
	height: 220px;
	margin: 0 auto;
	padding: 10px;
	margin-top: 30px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.but {
    margin-top: 5px;
}

.Output {
	position: relative;
	display:flex;
    justify-content:center;
    align-items:height100;
	margin-top: 10px;
}

.bread {
    font-size: 34px;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.Output {
	position: relative;
	margin-top: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}
</style>